{% extends "base.html" %}

{% block title %}Chat room for "{{ course.title }}"{% endblock %}

{% block content %}
  <div id="chat">
  </div>
  <div id="chat-input">
    <input id="chat-message-input" type="text">
    <input id="chat-message-submit" type="submit" value="Send">
  </div>
{% endblock %}

{% block domready %}
  var url = 'wss://' + window.location.host +
            '/ws/chat/room/' + '{{ course.id }}/';
  var chatSocket = new WebSocket(url);

  chatSocket.onmessage = function(e) {
    var data = JSON.parse(e.data);
    var message = data.message;

    var dateOptions = {hour: 'numeric', minute: 'numeric', hour12: true};
    var datetime = new Date(data.datetime).toLocaleString('en', dateOptions);

    var isMe = data.user === '{{ request.user }}';
    var source = isMe ? 'me' : 'other';
    var name = isMe ? 'Me' : data.user;

    var $chat = $('#chat');
    $chat.append('<div class="message ' + source + '">' +
                 '<strong>' + name + '</strong> ' +
                 '<span class="date">' + datetime + '</span><br>' +
                 message +
                 '</div>');
    $chat.scrollTop($chat[0].scrollHeight);
  };

  chatSocket.onclose = function(e) {
    console.error('Chat socket closed unexpectedly');
  };

  var $input = $('#chat-message-input');
  var $submit = $('#chat-message-submit');

  $submit.click(function() {
    var message = $input.val();
    if(message) {
      // send message in JSON format
      chatSocket.send(JSON.stringify({'message': message}));

      // clear input
      $input.val('');

      // return focus
      $input.focus();
    }
  });

  $input.focus();
  $input.keyup(function(e) {
    if (e.which === 13) {
      // submit with enter / return key
      $submit.click();
    }
  });
{% endblock %}
